<template>
	<view class="placeOrder">
		<view class="line">
			<view class="left">
				<text class="txt">桌号</text>
			</view>
			<view class="right">
				<text class="txt1">{{merchant.desk_name}}</text>
			</view>
		</view>
		<view class="heng"></view>
		<view class="good_info">
			<view class="title">{{merchant.title}}</view>
			<view class="list" v-for="(product,index2) in merchant.productList" :key="index2">
				<view class="left">
					<image :src="product.product_img" mode="aspectFill"></image>
				    <text class="name oneline">{{product.product_name}}</text>
					<text class="dot">{{product.sku_name}}</text>
				</view>
				<view class="right">
					<text class="num">x{{product.product_num}}</text>
					<view class="pic">
						<text>￥</text>
						<text>{{product.adjust_money}}</text>
					</view>
				</view>
			</view>
		</view>
	    <view class="heng"></view>
		<view class="line">
			<text>商品总金额</text>
			<text>¥{{merchant.pay_total_money}}</text>
		</view>
		<view class="line" v-if="merchant.coupon_list.length > 0">
			<text>优惠券</text>
			<view class="right">
				<picker @change="bindCouponChange" :value="selCoupon" :range="merchant.coupon_list" range-key="couponName">
					<view class="item">{{selCouponName}}</view>
				</picker>
				<view class="item" v-if="item.coupon_list.length == 0">无可用优惠券</view>
				<view class="jt"></view>
			</view>
		</view>
		<view class="line" v-if="selCouponMoney > 0">
			<text>优惠券金额</text>
			<text>-¥{{selCouponMoney}}</text>
		</view>
		<view class="line">
			<view class="left">
				<text>餐位费（{{merchant.tableware_num}}位）</text>
			</view>
			<view class="right">
				<view class="txt4">
					<text>¥</text>
					<text>{{merchant.total_tableware_fee}}</text>
				</view>
			</view>
		</view>
		<view class="line1">
			<view class="line1_txt">
				<text>小计 </text>
				<text>¥</text>
				<text>{{total_money}}</text>
			</view>
			
		</view>
		<view class="heng"></view>
		<view class="remark">
			<view class="remark_title">
				订单备注
			</view>
			<textarea value="" v-model="remark" placeholder-style="color:#999999" placeholder="请填写您的忌口" />
		</view>
		<view class="bottom">
			<view class="left">
				<view class="allpic">
					<text>¥</text>
					<text>{{total_money}}</text>
				</view>
			</view>
			<view class="right" @click="createOrder()">确认支付</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>应付金额</text>
					<text>￥{{total_money}}</text>
				</view>
				<view class="line3"  v-if="pay.total_hdq > 0"  @click="setUseHdq()">
					<view :class="formData.is_use_hdq == 1 ?'sel':'nosel'"></view>
					<text>使用互动券{{pay.total_hdq}}抵扣金额￥{{pay.total_hdq}}</text>
				</view>
				<view class="line2"  v-if="account.user_money > 0">
					<text>余额支付 - 当前余额：{{account.user_money}}</text>
					<view :class="formData.payment_type == 5 ?'sel':'nosel'" @click="selPayType(5)" v-if="Number(account.user_money) >= Number(total_money)"></view>
					<text v-else>余额不足</text>
				</view>
				<view class="line2" v-if="pay.pay_money > 0">
					<text>在线微信支付</text>
					<view :class="formData.payment_type == 1 ?'sel':'nosel'" @click="selPayType(1)"></view>
				</view>
				<view class="pay_bot" @click="subPay()">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
    var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				account: {},
				productList: [],
				merchant: {
					product_total_money: 0,
					discount_total_money: 0,
					pay_total_money: 0,
					desk_name: '',
					tableware_fee: 0,
					total_tableware_fee : 0,
					tableware_num: 0,
				},
				money_list: {},
				pay: {},
				formData: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
                    data: '',
					desk_id: 0,
					people_num: 0,
					order_type: 2,
					payment_type : 1,
					is_use_hdq : 0,
					remark: '',
				},
				selCoupon: 0,
				selCouponName: '请选择',
				selCouponMoney: 0,
				optionsParam: '',
				total_money : 0,
				isSub: false,
				subPayInfo: {
					data_id: ''
				},
				remark: '',
			}
		},
		methods: {
			setUseHdq(){
				_self.formData.is_use_hdq = _self.formData.is_use_hdq == 1 ? 0 : 1;
				_self.calculationTotalMoney();
				_self.$forceUpdate();
			},
			previewOrder() {
				var self = this;
				serve.request({
                    url: '/order/order-new/preview',
                    data: _self.formData
                }).then(res => {
                    if(res.code != 200) {
                        uni.showToast({
                        	title: res.message,
                        	icon : 'none',
                        	success:function(){ 
                        		setTimeout(function () { 
                        			common.jump('return_one');
                        			return ;
                        		}, 2000) 
                        	} 
                        });
                        return;
                    }
                    _self.account = res.data.account;
                    // _self.productList = res.data.productList;
                    _self.merchant = res.data.productList[0];
                    _self.pay = res.data.pay;
                    _self.calculationTotalMoney();
                    _self.$forceUpdate();
                });
			},
			close() {
				_self.$refs.popup.close();
			},
			createOrder() {
				_self.$refs.popup.open();
				return ;
			},
			selPayType(payType) {
				let needPayMoney = _self.pay.pay_money;
				if(_self.formData.is_use_hdq == 1) {
					needPayMoney = Number(needPayMoney) - Number(_self.pay.total_hdq);
				}
				if(payType == 5 && Number(needPayMoney) > Number(_self.account.user_money)) {
					return ;
				}
				_self.formData.payment_type = payType;
			},
			subPay() {
                if (_self.subPayInfo.data_id != '') {
                	console.info(_self.subPayInfo);
                	if (_self.subPayInfo.is_pay == 1) {
                		_self.wechatPay(_self.subPayInfo.data_id);
                		return;
                	}
                	let orderIds = _self.subPayInfo.data_id.split(",");
                	uni.redirectTo({
                		url: '/myOrder/order/lobbyView?id=' + orderIds[0]
                	});
                	return;
                }
				uni.showLoading({
					title: '提交中···',
					mask: true
				});
				_self.formData.remark = _self.remark != '' ? _self.merchant.id+':'+_self.remark : '';
				serve.request({
                    url: '/order/order-new/create',
                    data: _self.formData
                }).then(res => {
                    if(res.code == 200) {
                        uni.hideLoading();
                        _self.subPayInfo = res.data;
                        if (_self.subPayInfo.is_pay == 1) {
                        	_self.wechatPay(_self.subPayInfo.data_id);
                        	return;
                        }
                        let orderIds = _self.subPayInfo.data_id.split(",");
                        uni.redirectTo({
                        	url: '/myOrder/order/lobbyView?id=' + orderIds[0]
                        });
                        return ;
                    } 
                    uni.showToast({
                        title: res.message,
                        icon : 'none',
                    });
                });
			},
			wechatPay(operateId){
				serve.request({
                    url: '/order/pay/wechat',
                    data:{
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        data_id:operateId,
                        data_type: 'order_pay',
                    }
                }).then(res => {
                    if(res.code != 200) {
                        uni.showToast({
                            title:res.message,
                            icon: 'none'
                        });
                        return ;
                    }
                    let payId = res.data.payId;
                    let payConfig = res.data.payConfig;
                    uni.requestPayment({
                        provider: 'wxpay',
                        timeStamp: payConfig.timeStamp,
                        nonceStr: payConfig.nonceStr,
                        package: payConfig.package,
                        signType: payConfig.signType,
                        paySign: payConfig.paySign,
                        success: function (res) {
                            _self.queryPayResult(payId);
                            return ;
                        },
                        fail: function (err) {
                            let orderIds = _self.subPayInfo.data_id.split(",");
                            uni.redirectTo({
                            	url: '/myOrder/order/lobbyView?id=' + orderIds[0]
                            });
                            return ;
                        }
                    })
                });
				return ;
			},
			queryPayResult(payId) {
				uni.showLoading({
					title: '支付结果查询中···',
					mask: true
				});
				setTimeout(function() {
					serve.request({
						url: '/payservice/query-pay',
						data: {
							appkey: uni.getStorageSync('appkey'),
							payId: payId,
						}
					}).then(res => {
						if (res.data.payStatus == 1) {
							uni.showToast({
								title: '支付成功',
								icon: 'none',
								success() {
									setTimeout(function() {
										uni.redirectTo({
											url: '/myOrder/order/lobbyView?id=' + res.data.dataId
										});
									}, 2000)
								}
							});
						} else {
							_self.queryPayResult(payId);
						}
					});
				}, 1500);
			},
			calculationTotalMoney() {
				let totalMoney = Number(_self.pay.pay_money) + Number(_self.merchant.total_tableware_fee);
				if(_self.formData.is_use_hdq == 1) {
					totalMoney = Number(totalMoney) - Number(_self.pay.total_hdq);
				}
				console.info(totalMoney);
				_self.total_money = parseFloat(totalMoney).toFixed(2);
				_self.$forceUpdate();
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			},
		},
		onLoad(options) {
            _self = this;
			_self.formData.desk_id = options.desk_id || 0;
			_self.formData.people_num = options.people_num || 0;
            _self.formData.data = options.data || '';
			if( _self.formData.desk_id == 0 || _self.formData.people_num == 0 || _self.formData.data == '') {
				uni.showToast({
					title: '网络异常',
					icon : 'none',
					success:function(){ 
						setTimeout(function () { 
							common.jump('return_one');
							return ;
						}, 2000) 
					} 
				});
			}
		},
        onShow() {
            _self.previewOrder();
        },
		onPullDownRefresh() {
			_self.previewOrder();
		}
	}
</script>

<style scoped lang="scss">
	.placeOrder{
		padding-bottom: 100upx;
		.bottom{
			border-top: 1upx #EBEBEF solid;
			background: #FFFFFF;
			box-sizing: border-box;
			width:100%;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height:100upx;
			background:rgba(255,255,255,1);
			box-shadow:0px 1px 0px 0px rgba(235,235,239,1);
			z-index: 99;
			.left{
				display: flex;
				align-items: center;
				.allpic{
					display: flex;
					align-items: center;
					color: #EB5937;
					margin-left: 28upx;
					text:nth-child(1){
						font-size: 18upx;
					}
					text:nth-child(2){
						font-size: 32upx;
					}
					
				}
				.bottom_info{
					color: #999999;
					font-size: 20upx;
					margin-left: 13upx;
				}
			}
			.right{
				width:226upx;
				height:100upx;
				line-height: 100upx;
				text-align: center;
				color: #FFFFFF;
				font-size: 28upx;
				background:rgba(235,89,56,1);
			}
		}
		.number{
			box-sizing: border-box;
			padding: 20upx 30upx;
			input{
				width: 100%;
				height:90upx;
				background:rgba(245,245,245,1);
				border-radius:45upx;
				text-align: center;
				font-size: 28upx;
			}
			.lobby_eat_time{
				width: 100%;
				height: 45px;
				background: whitesmoke;
				border-radius: 22px;
				text-align: center;
				font-size: 14px;
				line-height: 45px;
			}
		}
		.heng{
			background: #F8F8F8;
			height:16upx;
			width: 100%;
		}
		.line1{
			display: flex;
			padding: 0upx 46upx;
			box-sizing: border-box;
			justify-content: flex-end;
			height: 80upx;
			.line1_txt{
				padding-top: 18upx;
				text:nth-child(1){
					color: #999999;
					font-size: 20upx;
					padding-right: 18upx;
				}
				text:nth-child(1){
					color: #999999;
					font-size: 20upx;
				}
				text:nth-child(2){
					color: #EB5937;
					font-size: 18upx;
					font-weight: bold;
				}
				text:nth-child(3){
					color: #EB5937;
					font-size: 32upx;
					font-weight: bold;
				}
			}
			
		}
		.line{
			position: relative;
			height: 100upx;
			box-sizing: border-box;
			display: flex;
			padding: 0upx 30upx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx #EBEBEF solid;
			.left{
				display: flex;
				align-items: center;
				.txt{
					color: #333333;
					font-size: 28upx;
					font-weight: bold;
				}
				.txt2{
					font-size: 20upx;
					color: #EB5937;
					border:1px solid rgba(235,89,55,1);
					padding: 0upx 4upx;
				}
				.txt3{
					color: #656565;
					font-size: 28upx;
					margin-left: 15upx;
				}
				.txt5{
					font-size: 20upx;
					color: #FFFFFF;
					padding: 0upx 4upx;
					background-color: #EB5937;
				}
				.txt6{
					font-size: 20upx;
					color: #EB5937;
					padding: 0upx 16upx;
					background-color: #FBDED7;
				}
			}
			.right{
				.txt1{
					color: #EB5937;
					font-size: 32upx;
					font-weight:bold;
				}
				.txt4{
					font-weight: bold;
					color: #333333;
					text:nth-child(1){
						font-size: 18upx;
					}
					text:nth-child(2){
						font-size: 32upx;
					}
				}
				.txt7{
					padding-right: 20upx;
					font-weight: bold;
					color: #EB5937;
					text:nth-child(1){
						font-size: 18upx;
					}
					text:nth-child(2){
						font-size: 32upx;
					}
				}
			}
		}
		.rightjt::after{
			position: absolute;
			right: 30upx;
			top: 48upx;
			content: '';
			border: 1upx solid rgba(153,153,153,0.6);
			border-width: 0 3upx 3upx 0;
			padding: 6upx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}
		.nobottom{
			border: none !important;
		}
		.good_info{
			box-sizing: border-box;
			padding: 40upx 30upx 60upx;
			.title{
			   font-size: 24upx;
			   color: #333333;
			   font-weight: bold;
			}
			.list{
				padding-top: 40upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					position: relative;
					display: flex;
					align-items: center;
					image{
						width:64upx;
						height:64upx;
						margin-right: 20upx;
					}
					.name{
						font-size:31upx;
						font-weight:bold;
						color: #333333;
						max-width: 400upx;
					}
					.dot{
						position: absolute;
						color: #999999;
						font-size: 20upx;
						left:84upx;
						bottom: -20upx;
					}
				}
			    .right{
					width: 250upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.num{
						font-size: 20upx;
						color: #999999;
					}
					.pic{
						color: #333333;
						font-weight:bold;
						text:nth-child(1){
							font-size: 18upx;
						}
						text:nth-child(2){
							font-size: 32upx;
						}
					}
				}
			}
		}
	    .remark{
			box-sizing: border-box;
			padding: 35upx 28upx 45upx;
			.remark_title{
				color: #333333;
				font-size: 28upx;
			}
			textarea{
				margin-top: 34upx;
				width:100%;
				height:200upx;
				background:rgba(153,153,153,0.1);
				box-sizing: border-box;
				padding: 33upx 38upx;
				font-size: 32upx;
				border-radius:12upx;
			}
		}
		.pay_type{
			position: relative;
			z-index: 200;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140upx;
			.close{
				position: absolute;
				width:23upx;
				height:23upx;
				right: 40upx;
				top: 45upx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 36upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 28upx;
				text:last-child{
					color: #FF5F60;
					font-size: 40upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				.txt{
					color: #999999;
				}
				.sel {
					background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
				
				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}
			}
			.line3{
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				.txt{
					color: #999999;
					padding-left: 20upx;
				}
				.sel {
					background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
				
				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}
			}
			.pay_bot {
			  width: 100%;
			  position: fixed;
			  left: 0;
			  bottom: 0;
			  height: 100upx;
			  background: #FFBF0A;
			  color: #fff;
			  font-size: 32upx;
			  line-height: 100upx;
			  text-align: center;
			  border-radius: 0;
			  &::after{
				  border: none;
			  }
			}
		}
	}
</style>